<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
  <main class="mdl-layout__content">
    <div class="mdl-card mdl-shadow--6dp">
      <div class="mdl-card__title mdl-color--primary mdl-color-text--white">
        <h2 class="mdl-card__title-text">Login</h2>
      </div>
      <div class="mdl-card__supporting-text">
        <form #loginForm="ngForm">
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="text" id="username" [(ngModel)]="model.name" name="name" required />
            <label class="mdl-textfield__label" for="username">Username</label>
          </div>
          <div class="mdl-textfield mdl-js-textfield">
            <input class="mdl-textfield__input" type="password" id="userpass" [(ngModel)]="model.password" name="password" required/>
            <label class="mdl-textfield__label" for="userpass">Password</label>
          </div>
        </form>
      </div>
      <div class="mdl-card__actions mdl-card--border">
        <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" (click)="login()" [disabled]="!loginForm.form.valid">Log in</button>
      </div>
    </div>
  </main>
</div>
